<!-- 留言 -->
<template>
    <Banner :bannerH="100" ></Banner>
    <Menu></Menu>
    <!-- 弹幕 -->
    <div class="mask" ref="maskRef">
        <vue-danmaku
        ref="danmakuRef"
        v-model:danmus="danmus"
        loop
        :channels="0"
        :right="40"
        :top="20"
        :randomChannel="true"
        useSlot
        style="height:100%; width:100%;">
        <template v-slot:dm="{ index, danmu }">
            <div class="danmu-item">
                <el-avatar :src="danmu.avatar" :size="30"></el-avatar>
                <span>{{ danmu.nickname }}：</span>
                <p>{{ danmu.content }}</p>
            </div>
        </template>
        </vue-danmaku>
        <div class="ipt">
            <MessageInput v-model="inputText"></MessageInput>
            <MessageButton @submit="buttonSubmit"></MessageButton>
        </div>
    </div>
    <!-- 留言 -->
    <div class="message-container">
        <!-- 评论 -->
        <Comment 
        :commentTitle="'留言'" 
        :commentType="COMMENTS_TYPE.MESSAGE.value"
        @commentSubmit="getCommentList">
        </Comment>
        <!-- 评论列表 -->
        <CommentList
        :commentList="messageList"
        :commentType="COMMENTS_TYPE.MESSAGE.value"
        :offset="offset"
        :limit="limit"
        :count="count"
        :isShow="isShow"
        @commentSubmit="getCommentList"
        @currentChange="currentChange"></CommentList>
    </div>
    <Footer></Footer>
</template>

<script setup>
import vueDanmaku from 'vue3-danmaku';
import { ElMessage } from 'element-plus';

import Banner from '@/layout/components/banner/banner.vue';
import Menu from '@/layout/components/menu/index-menu.vue';
import Footer from '@/layout/components/footer/footer.vue';
import Comment from '@/components/system/comment/comment.vue';
import CommentList from '@/components/system/comment-list/comment-list.vue';
import MessageInput from './components/message-input/message-input.vue';
import MessageButton from './components/message-button/message-button.vue';

import { commentApi } from '@/api/article/comment-api';
import { danmuApi } from '@/api/system/users/danmu-api';
import { useUserStore } from '@/store/system/user';
import { COMMENTS_TYPE } from '@/constants/system/user-const';
import { ENV_VITE_APP_URL } from '@/constants/common-const';


// ========================= 实列挂载之前调用 =========================
// 数据初始化
onBeforeMount(() => {
    getCommentList();
    getDanmuList();
});

// ========================= 获取弹幕列表 =========================
const danmus = ref([]);
async function getDanmuList() {
    const res = await danmuApi.list();
    danmus.value = res.data.data;
    danmus.value.forEach(item => item.avatar = ENV_VITE_APP_URL+item.avatar);
    danmakuRef.value.play();
}

// ========================= 发射弹幕 =========================
let inputText = ref('');            // 弹幕
const danmakuRef = ref(null)
const { id, token, userId, nickname, avatar} = useUserStore();
// 发射弹幕
async function buttonSubmit() {
    try {
        if(inputText.value == '') return ElMessage.error('内容不能为空哦');
        if(token && id) {
            let params = {
                userId: id,
                nickname: nickname,
                avatar: avatar,
                content: inputText.value
            };
            const res = await danmuApi.create(params);
            if(res.meta.status !== 200) throw new Error(res.meta.msg);
            danmakuRef.value.push(
                { avatar:ENV_VITE_APP_URL+avatar, nickname:nickname, content:inputText.value },
            );
            ElMessage.success('发送成功');
            inputText.value='';
        }else {
            const touristAvatar = 'https://s21.ax1x.com/2024/04/06/pFqmbHx.jpg';
            // 游客
            danmakuRef.value.push(
                { avatar:touristAvatar, nickname:'你', content:inputText.value },
            );
            inputText.value='';
        };
    } catch (e) {
        console.error(e);
        ElMessage.error(e.message);
    };
};

// ========================= 获取评论列表 =========================
const messageList = ref([]);
let limit = ref(30);
let offset = ref(1);
let count = ref(0);
let isShow = ref(false);
async function getCommentList() {
    let conditions = {
        params: {
            type: COMMENTS_TYPE.MESSAGE.value
        },
        limit: limit.value,
        offset: offset.value,
        order: [['createdAt', 'asc']]
    };
    const res = await commentApi.list(conditions);
    messageList.value = res.data.data;
    count.value = res.data.count;
    isShow = !!res.data.data.length;
};

// 分页
function currentChange(value) {
    console.log(value)
    offset.value = value;
    getCommentList();
};
</script>

<style lang="scss" scoped>
    @import '@/theme/public.scss';
    @import '@/theme/animations.scss';
    @import './message.scss';
</style>